<template>
	<div class="hshaixuan_total" style="z-index:101;">
				<div class="hshaixuan_Left" @click="shaixuanhide"></div>
				<div class="txuan_total">
					<div class="txuan_kuang">
						<ul>
							<li class="txuan_border">
								<span class="kuang" @click="ziying_show" ref="aa" :class="mm1?'kuang_style':''">国美自营</a></span>
								<span class="kuang" :class="mm?'kuang_style':''" @click="show_mm">仅看有货</span>
								<span class="kuang" :class="mm2?'kuang_style':''" @click="show_mm2">返利</span>
								<span class="kuang" @click="show_mm2">团抢商品</span>
							</li>
							<li class="txuan_border">
								<h3>配送至</h3>
								<!--自动获取地址  三级联动-->
								<span class="haddress_right"><a href="javascript:void(0)" class="iconfont icon-dizhi" @click="addresshow" >北京北京市朝阳区朝外街道  </a><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun address_you">️</a></span>

							</li>
							<li class="txuan_border">
								<h3 class="hshaixuan_inlinB">价格区间</h3>
								<span class="hshaixuan_price"><span class="kuang">最低价</span>--
								<span class="kuang">最高价</span></span>
							</li>

							<li class="txuan_border_width" ref="numbrand">
								<h3>品牌</h3><span class="hshow_content"> </span>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand" @click="h_show_xiala"></a>
								<span class="kuang" :class="mm4?'kuang_style':''" @click="show_mm4">黄尾袋鼠</span>
								<span class="kuang" :class="mm5?'kuang_style':''" @click="show_mm5">长城</span>
								<span class="kuang" :class="mm6?'kuang_style':''" @click="show_mm6">CELLAR</span>
								<span class="kuang" :class="mm7?'kuang_style':''" @click="show_mm7">张裕</span>
								<span class="kuang" :class="mm8?'kuang_style':''" @click="show_mm8">小企鹅</span>
								<span class="kuang" :class="mm9?'kuang_style':''" @click="show_mm9">拉菲</span>
								<div class="h_show_show">
									<span class="kuang" :class="mm10?'kuang_style':''" @click="show_mm10">金种子</span>
									<span class="kuang" :class="mm11?'kuang_style':''" @click="show_mm11">Waywood</span>
									<span class="kuang">ELDERTON</span>
									<span class="kuang">奔富</span>
									<span class="kuang">蒙特斯</span>
									<span class="kuang">猎豹庄</span>
									<span class="h_total">全部品牌</span>
								</div>
							</li>

							<li class="txuan_border_width">
								<h3>产地</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">阿根廷</span>
								<span class="kuang">澳大利亚</span>
								<span class="kuang">德国</span>
								<span class="kuang">法国</span>
								<span class="kuang">美国</span>
								<span class="kuang">中国</span>
								<span class="kuang">智利</span>
								<span class="kuang">西班牙</span>
						
							</li>

							<li class="txuan_border_width">
								<h3>等级</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">餐酒</span>
								<span class="kuang">普通级</span>
								<span class="kuang">优质等级</span>
							</li>

							<li class="txuan_border_width">
								<h3>度数范围</h3>
								<a href="javascript:void(0)" class="iconfont icon-xiangxiafanye brand"></a>
								<span class="kuang">4.9度及以下</span>
								<span class="kuang">5-9.9度</span>
								<span class="kuang">10-19.9度</span>
							</li>

						</ul>
						<div class="h_center">
							<span class="pshaixuan_reset" @click="reset_show">重置</span>
							<span class="hshaixuan_sure" @click="sure_show">确定</span>
						</div>
					</div>

				</div>
			</div>
	
</template>

<script>
	export default{
		name:"shaixuan",
		data(){
		  return {
		  		mm:false,
				mm2:false,
				mm4:false,
				mm5:false,
				mm6:false,
				mm7:false,
				mm8:false,
				mm9:false,
				mm10:false,
				mm11:false
		  }
		},
		methods:{
			huisale:function(){
				this.$router.push({path:"/sales"})
			},
			showaddress:function(){
				this.$router.push({path:'/dizhi'})
			},
			//控制筛选页面显示
			shaixuanshow: function() {
				$(".hshaixuan_total").css("display", "block");
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			$(".icon-xiangxiafanye").css("color", "#D2D2D2");
			
			},
			//控制筛选页面关闭
			shaixuanhide: function() {
				$(".hshaixuan_total").css("display", "none");
			},
			//控制地址页面出现
			addresshow: function() {
				$(".adress").css("display", "block");
			},
			//地址页面关闭
			addreshide: function() {
				$(".adress").css("display", "none");
			},
			//销量按钮
			sales:function(){
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			$(".icon-xiangxiafanye").css("color", "#D2D2D2");
			
			},
			//综合按钮
			hchoose: function() {
				//价格按钮变回原样
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			$(".icon-xiangxiafanye").css("color", "#D2D2D2");
			
				if(this.zonghe) {
					//单次点击
					$(".hzonghe_btn").css("display", "block");
					$(".icon-sanjiaoshang").css("display", "none");
					$(".icon-sanjiaoxia").css("display", "inline-block");
					$(".icon-sanjiaoxia").css("color", "deeppink");

				} else {
					//双次点击
					$(".hzonghe_btn").css("display", "none");
					$(".icon-sanjiaoxia").css("display", "none");
					$(".icon-sanjiaoshang").css("display", "inline-block");
				}
				//此时this指向default
				this.zonghe = !this.zonghe;
			},
			//综合第一li
			h_show: function() {
				this.show = !this.show;
			},
			h_second: function() {
				this.show = !this.show;
			},
			//下拉
			h_show_xiala: function() {
				this.show = !this.show;
				if(this.show==false){
					$(".h_show_show").css("display","block");
				}else{
					$(".h_show_show").css("display","none");
				}
			},
			//自营按钮
			ziying_show:function(){
					this.mm1=!this.mm1;
					},
			address_show:function(data){
				console.log(data);
				var str = data.province.value+data.city.value+data.area.value;
				$(".icon-dizhi").html(str);
			},
			show_mm:function(){
				this.mm=!this.mm;					
			},
			show_mm1:function(){
				this.mm1=!this.mm1;
			},
			youhuo:function(){
				this.mm02=!this.mm02;
			},
			fanli:function(){
				this.mm03=!this.mm03;
			},
			pinpai:function(){
				this.mm04=!this.mm04;
			},
			show_mm2:function(){
				
				this.mm2=!this.mm2;
			},
			show_mm4:function(e){
				if(!this.mm4){
					var strr = $(".hshow_content").text();
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					var str=$(".hshow_content").text();					
					var index=str.indexOf(",");
					var reg = new RegExp("黄尾袋鼠,");
					var smr = str.replace(reg,"");
					console.log(smr);
				    str=str.substring(index+1,str.length);
				    $(".hshow_content").html(smr);
				}
				this.mm4=!this.mm4;
			},
			show_mm5:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm5=!this.mm5;
			},
			show_mm6:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm6=!this.mm6;
			},
			show_mm7:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm7=!this.mm7;
			},
			show_mm8:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm8=!this.mm8;
			},
			show_mm9:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm9=!this.mm9;
			},
			show_mm10:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm10=!this.mm10;
			},
			show_mm11:function(e){
				if(!this.mm){
					//先获取上方展示区域的内容
					var strr = $(".hshow_content").text();
					//点击的展示的内容加入到上方
				$(".hshow_content").text(strr+e.target.innerHTML+",");
				}else{
					//获取上方框里面的内容
					var str=$(".hshow_content").text();	
					//检索,的下表位置
					var index=str.indexOf(",");
					//正则匹配
					var reg = new RegExp("仅看有货,");
					//用空字符串替代正则匹配的内容
					var smr = str.replace(reg,"");
					console.log(reg.test(str));
					//截取字符串 从字符串下标的开始位置 到字符串结束的位置
				    str=str.substring(index+1,str.length);
				    //把内容加入到上方展示区域
				    $(".hshow_content").html(smr);
				}
				this.mm11=!this.mm11;
			},
			//重置按钮 
			reset_show:function(){
				$(".kuang").removeClass("kuang_style");
				$(".hshow_content").text("");
			},
			//确定按钮
			sure_show:function(){
				//关闭本页面
				$(".hshaixuan_total").css("display","none");
				//在商品页面展示其内容
			}
			
			
		}
	}
	
	$(function(){
		//点击价格  绑定事件
	var bool = false;
	var flag = true;
	$(".price").click(function() {
		bool = false;
		if(bool == false) {
			flag = !flag;
			if(flag == false) {
				$(".icon-xiangshangfanye").css("color", "deeppink");
				$(".icon-xiangxiafanye").css("color", "#D2D2D2");
				$(".curpage").attr("href", "#/priceup");
			} else {
				flag = true;
				$(".curpage").attr("href", "#/pricedown");
				$(".icon-xiangxiafanye").css("color", "deeppink");
				$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			}

		} else {
			//这部分 加到其他几个点击事件中
			bool = true;
			console.log("默认");
			$(".icon-xiangshangfanye").css("color", "#D2D2D2");
			$(".icon-xiangxiafanye").css("color", "#D2D2D2");
		}	
	})
	})
	
	
</script>

<style scoped>
	
	}
	
	.txuan_kuang {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}
	
	.txuan_border {
		padding-top: 2%;
		padding-bottom: 2%;
		border-bottom: 1px solid rgba(243, 243, 243, 1);
	}
	
	.txuan_border_width {
		padding-top: 2%;
		padding-bottom: 2%;
		border-bottom: 4px solid rgba(227, 227, 229, 1);
		position: relative;
	}
	
	.kuang {
		width: 30%;
		height: 1.8rem;
		line-height: 1.8rem;
		display: inline-block;
		text-align: center;
		font-size: 0.26rem;
		text-decoration: none;
		color: grey;
		padding: 0.4rem 0;
		background: rgb(227, 227, 229, 0.8);
		margin: 2% 1% 0 1%;
	}
	/*品牌部分隐藏内容*/
	.h_show_show{display: none;}
	.pshaixuan_reset {
		width: 49%;
		height: 3rem;
		text-align: center;
		line-height: 3rem;
		background: rgba(242, 242, 242, 1);
		display: inline-block;
		color: black;
		font-size: 1.2rem;
	}
	
	.hshaixuan_sure {
		width: 49%;
		height: 3rem;
		text-align: center;
		line-height: 3rem;
		background: rgba(255, 20, 147, 1);
		display: inline-block;
		color: white;
		font-size: 1.2rem;
	}
	
	.h_center {
		margin: 0 auto;
		width: 98%;
	}
	
	.h_total {
		width: 100%;
		text-align: center;
		line-height: 2rem;
		height: 2rem;
		display: inline-block;
		text-align: center;
		margin-top: 1rem;
		border-top: 1px solid rgba(243, 243, 243, 1);
	}
	
	h3 {
		font-size: 1.2rem;
	}
	/*筛选部分 下拉按钮*/
	
	.brand {
		position: absolute;
		right: 5%;
		top: 3%;
		text-decoration: none;
		color: grey;
	}
	/*价格区间*/
	
	.hshaixuan_inlinB {
		display: inline-block;
		margin-right: 2.5rem;
	}
	/*全部分类*/
	
	.hshaixuan_total_fenlei {
		position: absolute;
		right: 3%;
		color: deeppink;
	}
	/*右翻*/
	
	.haddress_right {
		font-size: 0.8rem !important;
	}
	
	/*kuang的点击样式*/
	.kuang_style{color: deeppink;}
	/*品牌内 内容添加*/
	.hshow_content{width: 70%;position: absolute;top: 2.5%;left: 15%;color: deeppink;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}

	
	
</style>